<template>
	<view class="d-flex flex-d jfy-center aling-centen px-30 h-100">
		<image src="../../static/icon/loggo.jpg" class="img" mode=""></image>
		<view class="border  w-100 mt-20"></view>
		<view class="pg-30 shuoming">
			<view class="">HookShop小程序申请获取您以下权限</view>
			<view class=" textColor999 mt-20">获得你的公开信息(昵称，头像，地区，手机号码等)</view>
		</view>
		<view class="mt-20 btn w-100">
			<button hover-class="" @tap="wxLogin_new" v-if="userInfoStatus" class="loginbtn">登录</button>
			<!--  兼容低版本-->
			<button hover-class="" v-else open-type="getUserInfo" @getuserinfo="wxLogin_old"
				class="loginbtn">授权登录</button>
			<view hover-class="" class="quxiao mt-20" @tap="quxiao">取消</view>
		</view>
	</view>
</template>

<script>
	import {
		http_login,
		http_userinfo
	} from '@/config/apiRouter.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				userInfoStatus: false,
				code: '',
				parent_id: ''
			}
		},
		onLoad(opens) {
			console.log(opens);
			// 如果已经登录
			if (this.userMD.getToken()) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return
			}
			if (opens.scene) { // 推荐人id
				this.parent_id = opens.scene
			}
			if (uni.canIUse('getUserProfile')) {
				this.userInfoStatus = true
			}
			// 如果授权后在获取code可能登录失败，所以先获取code
			this.userMD.getcode().then(res => this.code = res)
		},
		methods: {
			...mapMutations(['setuser']),
			// 提交登录
			requestLogin(data) {
				http_login({
					data
				}).then(res => {
					try {
						uni.setStorageSync('hk_token', res.data.token);
						// token过期时间
						uni.setStorageSync('token_tiem', {
							exp_sec: res.data.exp_sec,
							constTiem: Date.now()
						});
						let userData = {
							avatarUrl: '',
							uname: ''
						}
						userData.avatarUrl = res.data.userInfo.headimg
						userData.uname = res.data.userInfo.nickname
						this.setuser(userData)
						uni.showToast({
							title: '登录成功'
						})
						setTimeout(() => {
							this.$tool.codeStatus.apply(this)
							this.$tool.navigateBack()
						}, 1000)
					} catch (e) {
						uni.showToast({
							title: 'login try-catch is not error',
							icon: 'none'
						})
						console.log(e);
					}
				})
			},
			// 低版本 userinfo登录
			async wxLogin_old(e) {
				let data = await this.userMD.getUserInfo()
				data.code = this.code
				if (this.parent_id) {
					data.parent_id = this.parent_id
				}
				this.requestLogin(data)
			},
			// 获取用户信息
			async wxLogin_new() {
				console.log('获取用户信息');
				let data = await this.userMD.getUserProfile()
				data.code = this.code
				if (this.parent_id) {
					data.parent_id = this.parent_id
				}
				console.log(data);
				this.requestLogin(data)
			},
			// 取消
			quxiao() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
	}

	.img {
		width: 122rpx;
		height: 122rpx;
		border-radius: 50%;
	}

	.border {
		border-bottom: 1px solid $color-zt;
		margin-bottom: 50rpx;
	}

	.shuoming {
		font-size: 24rpx;
	}

	.btn {

		view,
		button {
			text-align: center;
			line-height: 90rpx;
			background: linear-gradient(135deg, #FF890B, #eec95f);
			border-radius: 45px;
			color: #fff;
		}

		.loginbtn {}

		.quxiao {
			background: #ddd;
			color: #000;
		}
	}
</style>
